<template>
  <q-btn color="primary-dark" :label="t('repositories.repository_policies.new_policy')" @click="dialog = true" />

  <q-dialog v-model="dialog" transition-duration="100" @hide="closeDialog">
    <q-card style="min-width: 600px">
      <q-card-section class="flex justify-between">
        <h2 class="text-h6 q-my-none">
          {{ t('repositories.repository_policies.new_policy') }}
        </h2>
        <q-btn v-close-popup icon="close" flat round dense />
      </q-card-section>

      <q-separator />

      <repository-snapshot-policy-form
        v-model="policy"
        :form-valid="formValid"
        :loading="loading"
        :submit-label="t('defaults.create')"
        @submit="createPolicy"
      />
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useTranslation } from '../../composables/i18n'
import { useNewRepositorySnapshotPolicy } from '../../composables/components/repositories/NewRepositorySnapshotPolicy'
import RepositorySnapshotPolicyForm from './RepositorySnapshotPolicyForm.vue'

const t = useTranslation()

const emit = defineEmits(['reload'])

const props = defineProps<{ repository: string }>()

const { dialog, policy, formValid, loading, createPolicy, closeDialog } = useNewRepositorySnapshotPolicy(emit, props.repository)
</script>
